{% if section and section.type == "footer" %}
  {% assign section = section %}
{% else %}
  {% assign section = global.sections.footer %}
{% endif %}

{% stylesheet %}

  #footer_box {
    background: var(--footer-bg-color);
    color: var(--footer-font-color);
    position: relative;
    border-top: 1px solid #E8E8E1;
  }
  #footer_box .footer_link {
    display: flex;
    justify-content: space-between;
    padding: 50px 0 0;
  }
  #footer_box .footer_link dl {
    width: 25%;
  }
  #footer_box .footer_link dt .footer_nav_down {
    display: none;
  }
  #footer_box .footer_link dl:first-child {
    padding-right: 20px;
    box-sizing: border-box;
  }
  #footer_box .footer_link dl dt {
    color: var(--footer-dt-color);
    margin-bottom: 20px;
    line-height: 30px;
    font-weight: bold;
  }
  #footer_box .footer_link dl dt a {
    color: var(--footer-dt-color);
    line-height: 30px;
  }
  #footer_box .footer_link dl dd a {
    color: var(--footer-font-color);
    font-size: 14px;
    line-height: 2;
  }


  #footer_box .copyright {
    border-top: 1px solid #E8E8E1;
    padding: 30px 0;
    text-align: center;
    margin-top: 50px;
  }
  #footer_box .footer_link a {
    display: block;
  }
  #footer_box .footer_link .footer_nav_item {
    padding: 5px 0;
  }
  #footer_box .zuui-share-link {
    margin-top: 20px;
  }
@media screen and (max-width: 768px) {
  #footer_box .footer_link {
    flex-wrap: wrap;
  }
  #footer_box .footer_link dl {
    width: calc(50% - 30px);
    margin-bottom: 30px;
  }
  #footer_box .copyright {
    margin-top: 20px;
  }
}
@media screen and (max-width: 767px) {
  #footer_box .footer_link {
    padding: 50px 0 0;
  }
  #footer_box .footer_link dl {
    width: 100%;
  }
  #footer_box .footer_link dl dt {
    margin-bottom: 10px;
  }

}


.currency_box {
  position: relative;
}


.currency_box oem-currency-drop[position="top"] {
  bottom: calc(100% + 10px);
}

.currency_box oem-currency-drop[position="bottom"] {
  top: calc(100% + 10px);
}

.currency_box .currency_txt {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  letter-spacing: var(--nav_letter_spacing);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.currency_box .currency_txt svg {
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  transition: transform 0.2s ease-in-out;
}

.currency_box .drop_currency {
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  max-height: 300px;
  max-width: 200px;
  overflow-y: auto;
  display: none;
  z-index: 999;
}


.currency_box .drop_currency .currency {
  max-height: 200px;
  overflow-y: scroll;
}

.currency_box .drop_currency .currency::-webkit-scrollbar {
  display: none;
}

.currency_box .drop_currency li {
  list-style-type: none;
}

.currency_box .drop_currency li a {
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 30px;
  padding: 0 10px;
  color: #000;
  opacity: 0.7;
  letter-spacing: var(--nav_letter_spacing);
  font-size: 14px;
  margin: 0;
  white-space: nowrap;
}

.currency_box .drop_currency li a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.currency_box.drop_currency_on .drop_currency {
  display: block;
}

.currency_box.drop_currency_on .currency_txt svg.down {
  transform: rotate(-180deg);
}
#footer_box .currency_box_wrap {
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
#footer_box .currency_box_wrap .currency_txt span {
  display: flex;
  justify-content: center;
  align-items: center;
}
#footer_box .currency_box_wrap .currency_txt span span {
  margin: 0 8px;
}
{% endstylesheet %}
<div
  id="footer_box"
  style="--footer-bg-color:{{section.settings.bg-color}};--footer-font-color:{{section.settings.font-color}};--footer-dt-color:{{section.settings.dt-font-color}}"
  class="footer_box">
  <div class="footer_wrapper container_wrapper">
    <div class="footer_link">
      {% if section.settings.nav.id %}
        {% get_nav nav_id={section.settings.nav.id} %}
        {% for item in nav.nav_item %}
          <dl>
            <dt>
              <a
                style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};"
                target="{{item.setting_json.open | default : '_self' }}"
                {% if item.setting_json.model != 1 %}
                rel="external nofollow"
                {% endif %}
                href="{{item.url_json.url | default:'javascript:void(0)' }}">
                {% if item.src %}
                  <header-nav-img>{% include 'lazy_img', src: item.src, alt: '' %}{{ item.nav_item_name }}</header-nav-img>
                {% else %}
                  {{ item.nav_item_name }}
                {% endif %}
              </a>
            </dt>
            {% if item.children %}
              <dd>
                {% for childrenNav in item.children %}
                  <a
                    style="color:{{childrenNav.setting_json.color}};font-style:{{childrenNav.setting_json.style}};font-weight:{{childrenNav.setting_json.bold}};text-decoration:{{childrenNav.setting_json.decoration}};"
                    target="{{childrenNav.setting_json.open | default : '_self' }}"
                    {% if childrenNav.setting_json.model != 1 %}
                    rel="external nofollow"
                    {% endif %}
                    href="{{childrenNav.url_json.url | default:'javascript:void(0)' }}">
                    {% if childrenNav.src %}
                      <header-nav-img>{% include 'lazy_img', src: childrenNav.src, alt: '' %}{{ childrenNav.nav_item_name }}</header-nav-img>
                    {% else %}
                      {{ childrenNav.nav_item_name }}
                    {% endif %}
                  </a>
                {% endfor %}
              </dd>
            {% endif %}
          </dl>
        {% endfor %}
      {% else %}
        <dl>
          <dt>Company Info</dt>
          <dd>
            <a href="/pages/About-Us">About Us</a>
            <a href="/pages/Contact-Us">Contact Us</a>
            <a href="/comments">Customer Reviews</a>
          </dd>
        </dl>
        <dl>
          <dt>Service Center</dt>
          <dd>
            <a href="/pages/Shipping-policy">Shipping policy</a>
            <a href="/pages/Return-policy">Return policy</a>
            <a href="/pages/Terms-of-service">Terms of service</a>
            <a href="/pages/Privacy-policy">Privacy policy</a>
          </dd>
        </dl>
        <dl>
          <dt>Quick Links</dt>
          <dd>
            <a href="/search">Search
            </a>
            <a href="/account/login">Login</a>
            <a href="/account/register">Register</a>
            <a href="/account/trackingorder">Tracking Order</a>
            <a href="/blogs">Blog</a>
          </dd>
        </dl>
      {% endif %}
      <dl class="footer_con">
        {% if section.settings.nav_title_4 != '' %}
          <dt>{{ section.settings.nav_title_4 }}</dt>
        {% endif %}

        <dd class="footer_nav_list">{{ section.settings.footer_content2|html_content_filter }}</dd>
        <dd>
         {% include 'share_link',color:section.settings.font-color,section:section.settings %}
        </dd>
      </dl>
    </div>

  </div>

  <div class="copyright">
    {% if section.settings.is_currency %}
      <div class="currency_box_wrap">
        {% include 'currency', color: section.settings.font-color, position: 'top',is_currency_flag: section.settings.is_currency_flag %}
      </div>
    {% endif %}
    <div class="container_wrapper">{{ section.settings.copyright | parse_variables|html_content_filter }}</div>
  </div>

</div>
<script>
  $('.footer_nav_down').click(function() {
    if ($(this).parents('dl').hasClass('dl_on')) {
      $(this).parents('dl').removeClass('dl_on');
      $(this)
        .parents('dl')
        .find('.footer_nav_list')
        .slideUp();
    } else {
      $(this).parents('dl').addClass('dl_on');
      $(this)
        .parents('dl')
        .find('.footer_nav_list')
        .slideDown();
    }

  })
</script>
<script>
  (function() {
    $(document).click(function() {
      $("oem-currency").removeClass("drop_currency_on");
    });

    $('oem-currency oem-currency-label')
      .on('click', function(e) {
        e.stopPropagation();
        $(this).parent().toggleClass("drop_currency_on");
      })

      $('oem-currency drop_currency')
      .on('click', function(e) {
        e.stopPropagation();
      })

      $('oem-currency web-currency')
      .on('click', function(e) {
        e.stopPropagation();
        currencyPath($(this).data("type"));
      })

    function currencyPath(val) {
      const currency = moi.getUrlParam("currency");
      if (currency || location.href.indexOf("theme_id") > -1) {
        location.href = moi.changeURLArg(location.href, "currency", val);
      } else {
        location.href = moi.addURLParam(location.href, "currency", val);
      }
    }
  })()
</script>
{% schema %}
{
	"tag": "footer",
	"class": "footer",
	"is_global": true,
	"name": {
		"zh_CN": "底部",
		"en_US": "Bottom"
	},
	"max_blocks": "0",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单导航设置",
				"en_US": "Menu Navigation Settings"
			}
		},
		{
			"type": "card_nav",
			"label": {
				"zh_CN": "选择菜单",
				"en_US": "Select menu"
			},
			"default": {
				"id": "",
				"title": ""
			},
			"id": "nav"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "菜单4导航设置",
				"en_US": "Menu 4 Navigation Settings"
			}
		},
		{
			"type": "card_input",
			"id": "nav_title_4",
			"label": {
				"zh_CN": "菜单4标题",
				"en_US": "Menu 4 title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			}
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "文本编辑",
				"en_US": "Text editing"
			},
			"id": "footer_content2"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "货币切换",
				"en_US": "Currency switch"
			},
			"id": "is_currency",
			"default": "1"
		},
    {
			"type": "card_switch",
			"label": {
				"zh_CN": "货币前展示国旗",
				"en_US": "Display the national flag in front of the currency"
			},
			"id": "is_currency_flag",
			"default": "1"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "背景颜色",
				"en_US": "Background color"
			},
			"id": "bg-color"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "字体颜色",
				"en_US": "Font color"
			},
			"id": "font-color"
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "表头颜色",
				"en_US": "Head color"
			},
			"id": "dt-font-color"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "底部版权",
				"en_US": "Bottom copyright"
			},
			"id": "copyright"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "SNS账号",
				"en_US": "SNS account"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Facebook",
				"en_US": "Facebook"
			},
			"id": "is_facebook"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Twitter",
				"en_US": "Twitter"
			},
			"id": "is_twitter"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Pinterest",
				"en_US": "Pinterest"
			},
			"id": "is_pinterest"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Instagram",
				"en_US": "Instagram"
			},
			"id": "is_instagram"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Snapchat",
				"en_US": "SnaPChat"
			},
			"id": "is_snapchat"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tiktok",
				"en_US": "Tiktok"
			},
			"id": "is_tiktok"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Tumblr",
				"en_US": "Tumblr"
			},
			"id": "is_tumblr"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Linkedin",
				"en_US": "Linkedin"
			},
			"id": "is_linkedin"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Youtube",
				"en_US": "Youtube"
			},
			"id": "is_youtube"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Vimeo",
				"en_US": "Vimeo"
			},
			"id": "is_vimeo"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "VK",
				"en_US": "VK"
			},
			"id": "is_vk"
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "Whatsapp",
				"en_US": "Whatsapp"
			},
			"id": "is_whatsapp"
		},
    {
      "type": "card_switch",
      "label": {
          "zh_CN": "Line",
          "en_US": "Line"
      },
      "id": "is_line"
    }
	],
	"blocks": [],
	"default": {
		"settings": {
			"nav_title_1": "About us",
			"settings": {
				"nav2": {
					"id": "",
					"title": ""
				}
			},
			"nav_title_2": "Customer Support",
			"nav_title_3": "Support",
			"is_currency": true,
      "is_currency_flag": false,
			"nav_title_4": "Contact",
			"footer_content2": "Phone: 1-234-567-999<br />Email: xxx@xxx.com<br />Working hours from 8AM &ndash; 18AM EST",
			"bg-color": "#fff",
			"font-color": "#888888",
			"dt-font-color": "#1d1f21",
			"copyright": "©{{ date_year }} {{ storeConfig.name }} {{ current_domain }}",
			"is_facebook": true,
			"is_twitter": true,
			"is_pinterest": true,
			"is_instagram": false,
			"is_snapchat": false,
			"is_tiktok": false,
			"is_tumblr": false,
			"is_linkedin": false,
			"is_youtube": false,
			"is_vimeo": false,
			"is_vk": false,
			"is_whatsapp": false,
      "is_line": false,
			"nav": {
				"id": "",
				"title": ""
			}
		},
		"blocks": [],
		"type": "footer"
	}
}
{% endschema %}